<template>
  <el-card class="box-card" style="margin: 10px 0px">
    <div slot="header" class="clearfix">
      <!-- 头部左侧内容 -->
      <!-- v-model="activeName" @tab-click="handleClick" -->
   <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="折线图" name="first"></el-tab-pane>
    <el-tab-pane label="柱状图" name="second"></el-tab-pane>
   
  </el-tabs>
</el-tabs>
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="16" style="display:flex">
        <div  v-show="ishsow"
          :style="{ width: '800px', height: '400px' }"
          class="id"
          ref="charts"
        ></div>


         <div  v-show="!ishsow"
          :style="{ width: '800px', height: '400px' }"
          id="id"
          ref="charts2"
        ></div>
      </el-col>
      <el-col :span="8">
        <p class="text-title">博客贡献榜(前五人)</p>
       <el-table
      :data="people"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="贡献者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="num"
        label="贡献文章数"
        width="180">
      </el-table-column>
    
    </el-table>
          
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      activeName: 'first',
      people:[],
      ishsow:true,
      date:[],
      num:[]
    };
  },
  mounted() {
    this.getMonthBlog();
    this.getpeople()
  
  },
  methods: {
     handleClick(tab, event) {
        if(tab.index==0){
          this.ishsow=true
        }else{
          this.ishsow=false
let dataAxis = this.date;
let data = this.num;
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}
var myChart = echarts.init(document.getElementById("id"));

myChart.setOption({
  title: {
    text: '近一个月的博客发表数',
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      inside: true,
      color: '#fff'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: data,
      label: {
        show: true,
        position: 'top',
        color: '#000',
        fontWeight: 'bold',
        formatter: function (params) {
          return params.value;
        }
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      var dataIndex = params[0].dataIndex;
      var time = dataAxis[dataIndex];
      var count = data[dataIndex];
      return '时间：' + time + '<br/>' + '文章数：' + count;
    }
  }
});

// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.on('click', function (params) {
  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  myChart.dispatchAction({
    type: 'dataZoom',
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  });
});

        }
      },
    // 获取博客贡献前十的人
    async getpeople(){
        let result=await this.$API.echarts.getBlogUserNumVo()
         if (result.code == 200) {
            this.people=result.data
         }
    },
    // 获取进一个月的博客
    async getMonthBlog() {
      let result = await this.$API.echarts.getMonthBlog();
      console.log(result);
      if (result.code == 200) {
        result.data.forEach((item) => {
          item.date = item.date.substring(0, 10); // 保留前10个字符，即日期部分
          this.date.push(item.date)
          this.num.push(item.num)
        });

          // 第一个可视化配置
    var chartDom = echarts.init(this.$refs.charts);

  chartDom.setOption({
    title: {
    text: '近一个月的博客发表数',
  },
  xAxis: {
    type: "category",
    data: this.date,
    axisLabel: {
      rotate: 45,
      formatter: function(value) {
        return value.substring(5);
      }
    },
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: function(value) {
        return value + "篇";
      }
    }
  },
  grid: {
    left: "20%",
    right: "10%",
    bottom: "20%"
  },
  series: [{
    data: this.num,
    type: "line",
    smooth: true,
    itemStyle: {
      color: "#42b983"
    }
  }],
  symbol: "circle",
  symbolSize: 6,
  itemStyle: {
    color: "#42b983",
    borderColor: "#fff",
    borderWidth: 2
  },
  animation: true,
  animationDuration: 1000,
  animationEasing: "cubicOut",
  tooltip: {
  trigger: 'axis',
  formatter: '{b}: {c}篇'
}

});



      }
    },
  },
};
</script>

<style scoped>
.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tab {
  width: 100%;
}
.right {
  right: 0px;
  position: absolute;
}
.date {
  width: 200px;
  margin: 0px 20px;
}

.right span {
  margin: 0px 10px;
}

.text-title{
    font-size: 20px;
    font-weight: bold;
}

.text-span{
    margin-right: 100px;
    font-weight: bold;
}

</style>